<template>
  <div class="container dd">
    <div class="info">
      <img src="http://img.zhichiwangluo.com/zc_app_default_photo.png" alt />
      <span v-if="flag">
        <b>{{ username }}</b>
        <i>恭喜您，您已经是我们的普通会员了</i>
      </span>
      <span v-else>
        <router-link to="/login" tag="b">未登录</router-link>
        <i>登陆后更多服务等着您！</i>
      </span>
    </div>
    <main>
      <div class="usercenter">
        <ul class="order">
          <router-link :to="{name: 'order', params: {active: '0'}}" tag="li">
            <i class="iconfont icon-daifukuan"></i>
            <span>待付款</span>
          </router-link>
          <router-link :to="{name: 'order', params: {active: '1'}}" tag="li">
            <i class="iconfont icon-daifukuan"></i>
            <span>待发货</span>
          </router-link>
          <router-link :to="{name: 'order', params: {active: '2'}}" tag="li">
            <i class="iconfont icon-daishouhuo"></i>
            <span>待收货</span>
          </router-link>
          <router-link :to="{name: 'order', params: {active: '3'}}" tag="li">
            <i class="iconfont icon-daipingjia"></i>
            <span>待评价</span>
          </router-link>
          <li>
            <i class="iconfont icon-shouhou"></i>
            <span>售后</span>
          </li>
        </ul>
        <ul class="list">
          <router-link to="/address" tag='li'>
            <i class="iconfont icon-weibiaoti2fuzhi08"></i>
            <span>收货地址</span>
          </router-link>
          <router-link to="/cart" tag='li'>
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
          </router-link>
          <router-link to="/footprint" tag='li'>
            <i class="iconfont icon-jiaoyinzujifangke"></i>
            <span>足迹</span>
          </router-link>
          <router-link to="/collection" tag='li'>
            <i class="iconfont icon-shoucang"></i>
            <span>收藏</span>
          </router-link>
        </ul>
      </div>
      <div class="third">
        <ul class="list">
          <router-link tag='li' to='/vip'>
            <i class="iconfont icon-huiyuanqia"></i>
            <span>会员卡</span>
          </router-link>
          <router-link to='/coupon' tag='li'>
            <i class="iconfont icon-youhuiquan1"></i>
            <span>优惠券</span>
          </router-link>
          <router-link tag='li' to='/integral'>
            <i class="iconfont icon-jifenguizeguankong"></i>
            <span>积分</span>
          </router-link>
          <router-link tag='li' to='/about'>
            <i class="iconfont icon-chuxu"></i>
            <span>关于我们</span>
          </router-link>
        </ul>
      </div>
      <div class="logout" @click="logout" v-if="flag">退出登录</div>
    </main>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: localStorage.getItem('tel') ? localStorage.getItem('tel').replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
    }
  },
  computed: {
    flag () {
      if (localStorage.getItem('token')) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    logout () {
      localStorage.removeItem('token')
      this.$router.go(0)
    }
  },
  created () {
    if (!localStorage.token) {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss">
@import "@/lib/reset.scss";
.dd {
  @include background-color(rgb(243, 243, 243));
  .info {
    @include rect(100%, 1rem);
    @include background-color(#aad3f5);
    @include flexbox();
    @include align-items();
    @include padding(0 0.1rem);
    img {
      @include rect(0.5rem, 0.5rem);
    }
    span {
      @include flexbox();
      @include flex-direction(column);
      @include margin(0 0.1rem);
      @include color(#ffffff);
    }
  }
  main {
    @include rect(100%, auto);
    .usercenter {
      @include margin(0.1rem 0 0 0);
      @include rect(100%, auto);
      @include background-color(#ffffff);
      .order {
        @include flexbox();
        @include border(0 0 1px 0, #dddddd, solid);
        li {
          @include flexbox();
          @include flex-direction(column);
          @include flex();
          @include align-items();
          @include margin(0.1rem 0);
          i {
            @include color(#ff7c5d);
            @include font-size(0.3rem);
          }
        }
      }
      .list {
        @include rect(100%, auto);
        @include padding(0 0.1rem);
        @include box-sizing();
        li {
          @include flexbox();
          @include align-items();
          @include rect(100%, 0.4rem);
          i {
            @include margin(0 0.1rem 0 0.2rem);
            @include color(#ff7100);
          }
        }
        li + li {
          @include border(1px 0 0 0, #dddddd, solid);
        }
      }
    }
    .third {
      @include rect(100%, auto);
      @include margin(0.1rem 0 0);
      @include background-color(#fff);
      .list {
        @include rect(100%, auto);
        @include padding(0 0.1rem);
        @include box-sizing();
        li {
          @include flexbox();
          @include align-items();
          @include rect(100%, 0.4rem);
          i {
            @include margin(0 0.1rem 0 0.2rem);
            @include color(#ff7100);
          }
        }
        li + li {
          @include border(1px 0 0 0, #dddddd, solid);
        }
      }
    }
    .logout {
      @include rect(90%, 0.5rem);
      @include margin(0.1rem 5%);
      @include background-color(#ffffff);
      @include text-align();
      @include color(#ff3861);
      @include font-size(18px);
      @include line-height(0.5rem);
      @include border-radius(10px);
    }
  }
}
</style>
